<template>
    <div>
       <nav-bar>
        <template v-slot:default>商品详情：{{id}}</template>
       </nav-bar>
       <van-image style="margin-top: 50px;" width="100%" lazy-load :src="detail.cover_url"/>
       <van-card style="text-align: left;"
        :num="detail.stock"
        :price="detail.price+'.00'"
        :desc="detail.descrption"
        :title="detail.title"
        >
           <template #tags>
                <van-tag plain type="primary">{{ detail.is_recommend ==1 ? '推荐' : '普通' }}</van-tag>

           </template>
           <template #footer>
            <!-- handle:处理 -->
                <van-button type="warning" @click="handleAddCar">加入购物车</van-button>
                <van-button type="danger" @click="goToCar">立即购买</van-button>
           </template>
        </van-card>

                
                <van-tabs v-model:active="active">
                    <van-tab title="概述">
                        <div class="content" v-html="detail.details">
                            
                        </div>
                    </van-tab>
                    <van-tab title="热评">
                        <div v-for="item  in detail.comments" :key="item.id">{{item}}</div>
                    </van-tab>
                    <van-tab title="相关图书">
                            <goods-list :goods="like_goods"></goods-list>
                    </van-tab>
                </van-tabs>
    </div>
</template>
<script>

import GoodsList from '@/components/content/goods/GoodsList.vue';
import NavBar from '@/components/common/NavBar/NavBar.vue';
import { useRoute,useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ref,onMounted,reactive,toRefs } from 'vue';
import { getDetail } from '@/network/datail';
// useRoute:路由器传参数 useRouter:路由器跳转
import { addCar } from '@/network/shopcar';
import { Toast } from 'vant';
export default{
    name:"Detail",
    components:{
        NavBar,
        GoodsList
    },
    setup(){
        const active=ref(0)
        const route = useRoute()
        const router = useRouter()
        const store=useStore()

        let id = ref(0)
        let book=reactive({
            detail:{},
            like_goods:[],
        })
        onMounted(()=>{
            id.value=route.query.id
            getDetail(id.value).then(res=>{
                console.log(res);
                book.detail=res.goods
                console.log(res.goods);
                book.like_goods=res.like_goods
            })
        })
    //    添加购物车
    const handleAddCar=()=>{
        addCar({
            goods_id:book.detail.id,
            num:1
        }).then(res=>{
            if(res.status=='201' || res.status=='204'){
                Toast.success('添加成公')
                // 设置store中carCount
                store.dispatch('updateCar')

            }
            console.log(res.status);
        })
        console.log('addCart');
    }
    // 立即购买
    const goToCar=()=>{
        addCar({
            goods_id:book.detail.id,
            num:1
        }).then(res=>{
            if(res.status=='201' || res.status=='204'){
                router.push('/shopcar')
                Toast.success('添加成公,显示购物车')
                // 设置store中carCount
                store.dispatch('updateCar')

            }
            console.log(res.status);
        })
        console.log('goto.....');
    }
        return{
            id,
            // // toRef是用来给抽离响应式对象(被reactive包裹的对象)中的某个属性的,
            // // 并且把这个属性包裹成ref对象，使其和原对象产生链接
            ...toRefs(book),
            goToCar,
            handleAddCar,
            active
        }
    }
}
</script>
<style>
.content{
    padding: 10px;
}
.content img{
    max-width: 100%;
    height: auto;
}
</style>